<template>
  <view :class="[`${prefixCls}-search-container`]">
    <view class="current-location">
      <uv-text
        suffixIcon="arrow-down-fill"
        size="14px"
        lines="1"
        iconStyle="top:1px; font-size:12px; line-height:12px;margin:0 8px"
        :text="cityConfig.cityName || '定位中'"
        :customStyle="{ width: '30px' }"
        @click="onClickLocation"
      />
    </view>

    <!-- <uv-search
      v-model="keywords"
      :showAction="false"
      height="60rpx"
      :disabled="disabled"
      :placeholder="placeholder"
      @change="onChange"
      @search="onSearch"
      @clear="onClear"
      @click="onClick"
    >
      <template #prefix>
        置一个空元素空：fix:uv-search不支持左侧icon为空
        <text></text>
      </template>
    </uv-search> -->

    <view class="search-button" @click="onClick">
      <view>
        <uv-text color="#999999" size="14" text="想住哪儿"></uv-text>
      </view>
      <uv-button type="primary" size-="small" shape="circle" icon="search" iconColor="#fff" iconSize="16px" :customStyle="{ minWidth: '48px', height: '26px' }" />
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'search',
  components: {},
  mixins: [],
  props: {
    placeholder: {
      type: String,
      default: '想住哪儿',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    keyword: {
      type: String,
      default: '',
    },
  },
  model: {
    //event:什么时候触发v-model行为
    event: 'change',
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: 'keyword',
  },
  data() {
    return {
      city: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['cityConfig']),
    keywords: {
      get() {
        return this.keyword
      },
      set(nv) {
        this.$emit('change', nv)
      },
    },
  },

  created() {},
  mounted() {},
  destroyed() {},
  options: {
    styleIsolation: 'shared',
  },
  methods: {
    onChange(e) {
      this.$emit('change', e)
    },

    onSearch(e) {
      this.$emit('search', e)
    },

    // 搜索组件点击事件
    onClick() {
      this.$ROUTE.go('/pages/subpackage/search-page/index')
      this.$emit('click')
    },

    // 清除搜索内容
    onClear() {
      this.$emit('clear')
    },

    // 操作左侧定位
    onClickLocation() {
      this.$ROUTE.go('/pages/subpackage/city/index')
      this.$emit('clickLocation')
    },

    // 操作右侧搜索按钮
    onClickSearch() {
      // 禁用时搜索按钮事件添加到uv-search组件上的click事件
      if (this.disabled) {
        this.onClick()
        return
      }

      this.onSearch(this.keywords)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('search-container')} {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  padding: 10rpx 8rpx 10rpx 32rpx;
  background-color: #f2f2f2;
  border-radius: 60rpx;
  .current-location {
    // max-width: 100rpx;
  }

  .search-button {
    width: calc(100% - 100rpx);
    display: flex;
    justify-content: space-between;
    align-items: center;
    // max-width: 100rpx;
    /* #ifdef MP-WEIXIN */
    // max-width: 112rpx;
    /*  #endif */
  }

  ::v-deep .uv-button-wrapper {
    .uv-button {
      height: 60rpx;
    }
  }
}
</style>
